<template>
  <div>
    <div class="nav" v-show="!show_top">
      <ul class="flex-ar-center nav_box">
        <li v-for="(item) in nav" :key="item.id">
          <img class="wimg" :src="item.icon" alt="" @click="classskip(item.id)">
        </li>
      </ul>

    </div>
    <!-- 背景图 -->
    <div class="title_img">
      <img class="wimg" :src="typeInfo.bg_img" alt="">
    </div>

    <!-- 内容 -->
    <div class="w">
      <!-- 商品title-->
      <div v-show="$route.query.id" class="title_box"
        :style="{background:(typeInfo.subject_color?typeInfo.subject_color:'#ffffff'),opacity:opacity}">
        <p>{{typeInfo.type_name}}</p>
        <span>{{typeInfo.subtitle}}</span>
      </div>
      <!-- 商品列表 -->
      <div class="list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul class="list_box">
              <!-- <li class="flex-be-center list_box_item" v-for="(item) in list_box" :key="item.id">
    
                <div class="flex-be-cneter list_box_item_lf">
                  <img class="wimg" :src="item.src" alt="">
                </div>
         
                <div class="flex-co-center list_box_item_rg">
                  <div class="list_box_item_rg_title">
                    <p class="p-two">ROMA DR01-PLUS Black Goaler</p>
                    <p> <span class="rg_title_one">销量 3287 笔</span> <span>库存 800</span></p>
                  </div>

                  <p class="price_con"><span class="price">¥ 198.00</span> <span>运费 <em>0.00 </em> 元</span></p>
                  <div class="flex-be-center list_img_box">
                    <div>
                      <img class="wimg" :src="banner.img1.src" alt="">
                    </div>
                    <div>
                      <img class="wimg" :src="banner.img1.src" alt="">
                    </div>
                    <div>
                      <img class="wimg" :src="banner.img1.src" alt="">
                      <span>MORE +</span>
                    </div>
                  </div>
                </div>
              </li> -->

              <li class="flex-be-center list_box_item" v-for="(item) in list_box" :key="item.index"
                @click="navto(item.goods_id)">
                <!-- 左侧图片 -->
                <div class="flex-be-cneter list_box_item_lf">
                  <img class="wimg" :src="item.goods_icon" alt="">
                </div>
                <!-- 右侧信息 -->
                <div class="flex-co-center list_box_item_rg">
                  <div class="list_box_item_rg_title">
                    <p class="p-two">{{item.goods_name}}</p>
                    <p> <span class="rg_title_one">销量 {{item.sale_num}} 笔</span> <span>库存 {{item.goods_num}}</span></p>
                  </div>

                  <p class="price_con"><span class="price">¥ {{item.goods_price}}</span> <span>运费 <em>0.00 </em>
                      元</span></p>
                  <div class="flex-be-center list_img_box">
                    <!-- <van-swipe :autoplay="0" :show-indicators="false" class="van_spier">
                      <van-swipe-item v-for="(item2,index2) in item.goods_images2" :key="index2" :class="index2==item.goods_images.length-1? 'active':'' " class="van_slider">
                        <img class="wimg" :src="item2" alt="">
                        <div v-if="index2==item.goods_images.length-1"></div>
                        <span v-if="index2==item.goods_images.length-1">MORE +</span>
                      </van-swipe-item>
                    </van-swipe> -->
                    <div v-for="(item2,index2) in item.goods_images" :key="index2"
                      :class="index2==item.goods_images.length-1? 'active':'' " class="slider_item">
                      <img class="wimg" :src="item2" alt="">
                      <div v-if="index2==item.goods_images.length-1"></div>
                      <span v-if="index2==item.goods_images.length-1">MORE +</span>
                    </div>
                    <!-- <div>
                      <img class="wimg" :src="banner.img1.src" alt="">
                    </div>
                    <div>
                      <img class="wimg" :src="banner.img1.src" alt="">
                      <span>MORE +</span>
                    </div> -->
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>


      </div>

    </div>
  </div>
</template>
<style lang="" scoped>
  .title_img {
    height: 120px;
    overflow: hidden;
  }

  /*
  .title_img>img{
    height:3rem;
  } */

  .title_box {
    /* width:6.9rem; */
    height: 2rem;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.24rem;
    font-weight: 400;
    color: #666666;
    margin-top: -1.57rem;
    position: relative;
    margin-bottom: 0.71rem;
  }

  .title_box p {
    font-size: 0.36rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.18rem;
  }

  .list {
    margin-bottom: 1.44rem;
  }

  /* 列表 */
  .list_box_item {
    height: 100%;
    align-items: flex-start;
    margin-bottom: 0.5rem;
  }

  .list_box_item_lf {
    width: 3.4rem;

  }

  .list_box_item_lf img {
    max-height: 4.3rem;
  }

  .list_box_item_rg {
    flex: 1;
    height: 100%;
    max-height: 4.3rem;
    padding-left: 0.36rem;

  }

  .list_box_item_rg .price_con {
    margin-bottom: 0.67rem;
  }

  .list_box_item_rg_title p:nth-child(1) {
    font-size: 0.26rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.19rem;
    padding-top: 0.3rem;
    line-height: 0.36rem;
    height: 0.72rem;
  }

  .list_box_item_rg_title p:nth-child(2) {
    /* width:0.7rem;
height:0.18rem; */
    height: 0.18rem;
    font-size: 0.18rem;
    /* font-family:Source Han Sans SC; */
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-bottom: 0.99rem;
  }

  .list_box_item_rg_title p:nth-child(2) .rg_title_one {
    padding-right: 0.59rem;
  }

  .price_con {
    font-size: 0.18rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .price_con .price {
    font-size: 0.36rem;
    font-weight: bold;
    color: rgba(216, 30, 6, 1);
    padding-right: 0.24rem;
  }

  .price_con em {
    color: rgba(216, 30, 6, 1);
  }

  .list_img_box {
    width: 3.2rem;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .list_img_box>div {
    width: 0.98rem;
    /* height: 0.98rem; */
  }

  .list_img_box>div img {
    width: 0.98rem;
    max-height: 0.98rem;
  }

  .list_img_box .active {

    position: relative;
  }

  .list_img_box .active div {
    background: rgba(0, 0, 0, 1);
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    ;
    width: 0.98rem;
    height: 0.98rem;
  }

  .list_img_box .active span {
    position: absolute;
    top: 0.42rem;
    left: 0;
    color: #ffffff;
    font-size: 0.24rem;
    transform: scale(0.83, 0.83)
  }

  .list_box>li:nth-last-child(1) {
    /* margin-bottom: 2rem; */
  }

  .van_spier {
    border: 1px solid red;
  }

  .wimg.top {
    width: 76%;
    padding: 10px;
  }

  .nav {
    margin: 0.39rem 0;
  }

  .nav_box li {
    padding: 0 0.2rem 0;
  }
</style>
<script>
  import getData from '../../assets/js/axios.js'
  export default {
    beforeRouteUpdate(to, from, next) {
      console.log(from, "update")

      next();
    },
    data() {

      return {
        // 无限滚动数据
        typeInfo: {},
        loading: false,
        finished: false,
        refreshing: false,
        alllist: '',
        id: null,
        page: 1,
        //结束
        banner: {
          img1: {
            url: "./ac",
            src: require("../../assets/img/index/banner.jpg"),
          }
        },
        //列表展示
        list_box: [],

        //顶部
        nav: [],
        show_top: this.$route.query.id,
        opacity: 1




        // img1: {
        //   id: 12,
        //   sales: "328笔",
        //   stock: 800,
        //   detail: "DW潮流新品优选推荐~",
        //   number: 53858,
        //   src: require("../../assets/img/index/tuijian.png"),
        //   price: "198.00",
        //   freight: "120元",
        //   smaill: {
        //     img1: require("../../assets/img/index/1.png"),
        //     img2: require("../../assets/img/index/2.png"),
        //     img3: require("../../assets/img/index/3.png"),
        //   }
        // },
        // img2: {
        //   id: 21,
        //   sales: "328笔",
        //   stock: 800,
        //   detail: "DW潮流新品优选推荐~",
        //   number: 53858,
        //   src: require("../../assets/img/index/tuijian.png"),
        //   price: "198.00",
        //   freight: "120元",
        //   smaill: {
        //     img1: require("../../assets/img/index/1.png"),
        //     img2: require("../../assets/img/index/2.png"),
        //     img3: require("../../assets/img/index/3.png"),
        //   }
        // },
        // img3: {
        //   id: 31,
        //   sales: "328笔",
        //   stock: 800,
        //   detail: "DW潮流新品优选推荐~",
        //   number: 53858,
        //   src: require("../../assets/img/index/tuijian.png"),
        //   price: "198.00",
        //   freight: "120元",
        //   smaill: {
        //     img1: require("../../assets/img/index/1.png"),
        //     img2: require("../../assets/img/index/2.png"),
        //     img3: require("../../assets/img/index/3.png"),
        //   }
        // },



      }
    },
    mounted() {
      getData.classType().then(res => {
        //console.log(res,"中部导航");
        this.nav = res.data.data;

      }).catch(err => {

      })


    },


    methods: {
      /*       sendid(){
              getData.classList({
              "page": this.page,
              "goods_category": this.$route.query.id
              }).then(res => {
                console.log(res.data,"fenlei")
                this.typeInfo = res.data.data.goods_type
              })
              console.log(this.$route.query.id,"ididid")
            }, */
      //点击四按钮跳转
      classskip(e) {
        getData.classList({
          "page": this.page,
          "goods_category": e
        }).then(res => {
          console.log(res, "fenlei")
          this.typeInfo = res.data.data.goods_type
        })
        this.$router.push("/classify?id=" + e)
      },
      // 下拉刷新
      onLoad() {
        if (this.refreshing) {
          this.list_box = [];
          this.refreshing = false;
        }
        //console.log(this.page, "向下拉了")
        var id = this.$route.query.id;
        var idnumber;
        if (id) {
          idnumber = id;
        } else {
          idnumber = "";
        };
        var allnumber;
        console.log(idnumber, "canshu")
        var para = {
          "page": this.page,
          "goods_category": idnumber
        };
        //console.log(this.page,"页数")   
        getData.classList(para).then(res => {
          console.log(res.data.data.goods_type.diaphaneity, "++++++++++++++++")
          // this.opacity=res.data.data.goods_type.diaphaneity;
          res.data.data.list.data.map(item => {
            let arr = []
            for (var i = 0; i < item.goods_images.length; i += 3) {
              arr.push(item.goods_images.slice(i, i + 3));
              this.$set(item, 'goods_images2', arr)
            }
          })
          console.log(res.data.data.list.data, "________________________")
          this.typeInfo = res.data.data.goods_type
          ///console.log(allnumber,"总量")
          this.list_box.push(...res.data.data.list.data);
          //console.log(this.list_box,3636);
          this.page++;
          this.loading = false;
          console.log(res, this.page, "下拉刷新的")
          //console.log(this.list_box,3636);
          if (this.list_box.length >= res.data.data.list.total) {
            this.finished = true
          }
        }).catch(err => {

        })




      },

      // 加载失败调用方法
      onRefresh() {
        console.log("失败了")
        this.finished = false; 		// 清空列表数据
        this.loading = true; 			// 将 loading 设置为 true，表示处于加载状态
        this.page = 1;				// 分页数赋值为1
        this.list_box = [];				// 清空数组
        this.onLoad(); 				// 重新加载数据
      },


      navto(a) {
        this.$router.push('/goods?id=' + a)
      }
    },


  }



</script>